{extend name="base" /}
{block name="style"}
<style>
    .main {
        padding-bottom: 70px;
    }

    .reset-block {
        line-height: 22px;
    }

    .reset-col-sm-4 {
        width: 35.8%;
    }

    .reset-col-sm-8 {
        width: 64.2%;
    }

    .panel-heading {
        padding: 6px 15px;
    }

    .panel-heading a {
        color: #888;
    }

    #homepage img {
        padding: 0;
        margin: 0;
    }

    #homepage img {
        display: block;
        width: 100%;
    }

    #homepage .clearfix {
        *zoom: 1;
    }

    #homepage .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    #homepage .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
        color: #fff;
        background-color: #42399C;
        border: 0;
    }

    #homepage .nav-tabs>li>a {
        border: 0;
        color: #000;
    }

    #homepage .tab-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
    }

    #homepage .tab-text a {
        font-size: 16px;
    }

    #homepage .tab-text span {
        padding-right: 5px;
        font-size: 3rem;
        vertical-align: middle;
    }

    #homepage .tab-date {
        text-align: right;
        /*padding-top: 6px;*/
        font-size: 15px;
        margin: 0;
    }

    #homepage .list-group-item {
        position: relative;
        display: block;
        padding: 14px 0 8px 0;
        border-left: 0;
        border-right: 0;
    }

    #homepage .thumbnail {
        border: 0;
        padding: 0;
        width: 210px;
        height: 210px;
        position: relative;
    }

    #homepage .thumbnail img {
        width: 100%;
        height: 100%;
    }

    #homepage .thumbnail p {
        color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        padding: 10px 0;
        font-size: 16px;
    }

    .dh ul {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .dh ul li {
        float: left;
        width: 15%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

    .dh ul li a {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .dh ul li a img {
        height: 187px;
    }

    .dh ul li .layer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: transparent;
        height: 100%;
        overflow: hidden;
    }

    .dh ul li .layer .p1 {
        color: #fff;
        font-weight: bold;
        margin: 30px 0 0 20px;
    }

    .dh ul li .layer .p2 {
        color: #fff;
        margin: 0;
        margin-left: 20px;
    }

    @media (max-width: 767px) {
        .reset-block {
            line-height: 18px;
        }

        .col-xs-12 {
            width: 100%;
        }
        .main {
            padding-bottom: 20px;
        }
        .dh ul li {
            width: 100%;
            float: none;
        }
        .reset-col-sm-8 {
            padding-right: 40px;
        }
        div.reset-block {
            padding: 0 50px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        #homepage .list-group-item {
            padding: 5px 0
        }
    }

    @media (min-width: 991px) and(max-width: 1200px) {
        .reset-block {
            line-height: 18px;
        }
        .dh ul li .layer .p1 {
            font-size: 16px;
            margin-left: 10px;
        }
        .dh ul li .layer .p2 {
            font-size: 12px;
            margin-left: 10px;
        }

    }

    @media (min-width: 1200px) {
        .dh ul li .layer .p1 {
            font-size: 20px;
        }
        .dh ul li .layer .p2 {
            font-size: 14px;
        }
    }

    header .child-menu a {
        color: #eee;
    }


</style>
{/block}
{block name="content"}
<section id="banner">
    <div id="carousel-box" class="carousel slide" data-ride="carousel">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            {volist name="banners" id="vo" key="k"}
            <div class="item {if condition='$k eq 1'}active{/if}">
                <img src="/assets/img/p_01.png">
            </div>
            {/volist}
        </div>
        <!-- Controls -->
        <a class="left control" href="#carousel-box" role="button" data-slide="prev">
            <img src="/assets/img/left.png" alt="" />
        </a>
        <a class="right control" href="#carousel-box" role="button" data-slide="next">
            <img src="/assets/img/right.png" alt="" />
        </a>
    </div>
</section>
<section id="homepage" class="main">
    <div class="container">
        <div class="row" style="padding: 0 15px;">
            <div class="reset-col-sm-4 col-xs-12 reset-block" style="padding-right: 40px;border:0;">
                <div class="row">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#notice" data-toggle="tab">新闻公告</a>
                        </li>
                        <li>
                            <a href="#party" data-toggle="tab">建党新闻</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="notice">
                            <ul class="list-group">
                                {volist name="posts" id="vo"}
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="/post/detail/{$vo.id}">{$vo.title}</a></p>
                                    <p class="tab-date">{$vo.create_time|date="Y.m.d",###}</p>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="party">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="">新闻公告熊猫置业组织召开贯彻党的十九大精神</a></p>
                                    <p class="tab-date">2018.4.23</p>
                                </li>
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="">新闻公告物业公司三项目同时荣获栖霞区星标住</a></p>
                                    <p class="tab-date">2018.5.10</p>
                                </li>
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="">新闻公告物业公司三项目同时荣获栖霞区星标住</a></p>
                                    <p class="tab-date">2018.5.11</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reset-col-sm-8 col-xs-12" style="padding-left: 40px;">
                <div class="row">
                    <div class="panel panel-default" style="border:0;">
                        <div class="panel-heading clearfix" style="background: transparent;border:0;">
                            <span>经典案例</span>
                            <a class="rt" href="#" >更多></a>
                        </div>
                        <div class="panel-body" style="padding-top: 5px;">
                            <div class="row">
                                {volist name="examples" id="vo"}
                                <div class="col-xs-12 col-sm-4" style="padding-right: 0;">
                                    <a href="/project/detail/{$vo.project_id}" class="thumbnail">
                                        <img src="{$vo.poster}">
                                        <p>{$vo.name}</p>
                                    </a>
                                </div>
                                {/volist}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12 dh sfq">
                <ul>
                    {volist name="buju" id="vo" key="k"}
                    <li {if condition="$k eq 1"}class="curr"{/if}>
                        <a href="javascript:;">
                            <img src="{$vo.poster1}">
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<script type="text/javascript">

    $(function () {
        $('.carousel').carousel({
            interval: 4000
        })

        var width = $(window).width();
        if (width > 767) {
            animateImg();
        }

        function animateImg() {
            jQuery('.dh ul li.curr').animate({ width: '39%'}, 'slow');
            jQuery('.sfq ul li').hover(function () {
                $(this).animate({ width: '39%' }, 'slow').siblings().animate({width: '15%'}, 'slow').removeClass('curr');
            }, function () {})
        }

    });
</script>
{/block}